<template>
    <div class="">
        <Header></Header>
        <div class="main">
          <div class="body">
            <div class="leftNav">
              <div class="items menu" v-for="(item, index) in state.menuList" :key="index" @click="$router.push(item.path + '')">
                <img :src="item.img" alt="" class="menu_img">
                <div class="mLeft8 menu_name c33">{{ item.name }}</div>
              </div>
            </div>
            <div class="RouterContent">
              <router-view></router-view>
            </div>
          </div>

        </div>
    </div>
</template>

<script lang="ts" name="cart" setup>
import { reactive } from "vue";
import Header from '../../components/Header/Header.vue';
const state = reactive({
  menuList:[
    {
      img: '/src/assets/icons/account/order.png',
      name: 'Мой заказ',
      path:'/account_order'
    },
    {
      img: '/src/assets/icons/account/vip.png',
      name: 'Членский центр',
      path:'/vipIndex'
    },
    {
      img: '/src/assets/icons/account/address.png',
      name: 'Управление адрес',
      path:'/address'
    },
    {
      img: '/src/assets/icons/account/collect.png',
      name: 'Моя коллекция',
      path:'/bookmark'
    },
    {
      img: '/src/assets/icons/account/footmark.png',
      name: 'Мои следы',
      path:'/browsing'
    },
    {
      img: '/src/assets/icons/account/inquiry.png',
      name: 'Мой запрос',
      path:'/inquiry'
    },
    {
      img: '/src/assets/icons/account/evaluate.png',
      name: 'Моя оценка',
      path:'/evaluate'
    },
    {
      img: '/src/assets/icons/account/invoice.png',
      name: 'Управление счетами - фактурами'
    },
    {
      img: '/src/assets/icons/account/problem.png',
      name: 'Часто задаваемые вопросы'
    },
    {
      img: '/src/assets/icons/account/suggestion.png',
      name: 'Рекомендации по жалобам'
    },
    {
      img: '/src/assets/icons/account/customer.png',
      name: 'Онлайн обслуживание клиентов'
    },
    {
      img: '/src/assets/icons/account/setting.png',
      name: 'Настройки системы',
      path:'/account_setting'
    },
  ]
})

</script>

<style lang="less" scoped>
.main {
  background-color: #F6F6F6;
  display: flex;
  justify-content: center;
  .body{
    width: 1400px;
    //background-color: #ff0000;
    display: flex;
    justify-content: space-between;
    margin: 40px 0;
    .leftNav{
      width: 220px;
      background: #FFFFFF;
      border-radius: 16px 16px 16px 16px;
      align-self: flex-start;
      box-sizing: border-box;
      padding: 30px 12px;
      .items{
        margin-bottom: 20px;
        cursor: pointer;
        box-sizing: border-box;
        padding: 6px 8px;
        .menu_img{
          width: 20px;
          height: 20px;
        }
        .menu_name{
          font-family: Segoe UI, Segoe UI;
          font-weight: 600;
          font-size: 14px;
          color: #333333;
          line-height: 14px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
    }
    .RouterContent{
      flex: 1;
      align-self: flex-start;
      margin-left: 16px;
    }
  }
}
</style>
